<template>
  <!-- 修改密码 -->
  <view class="pd">
    <input
      type="text"
      placeholder="请输入旧密码"
      v-model="old"
      class="input"
      v-if="userInfo.password"
    />
    <input
      type="password"
      placeholder="请输入新密码"
      v-model="new1"
      class="input"
    />
    <input
      type="password"
      placeholder="请再次输入新密码"
      v-model="new2"
      class="input"
    />
    <button
      class="mainBg"
      style="border-radius: 200rpx; color: #fff"
      :disabled="disabled"
      :class="disabled ? 'bg-main-disabled' : ''"
      @click="submit"
    >
      设置
    </button>
  </view>
</template>

<script>
import { mapState } from "vuex";
import { editPwd } from "@/api/api";
export default {
  data() {
    return {
      old: "",
      new1: "",
      new2: "",
    };
  },
  computed: {
    disabled() {
      return this.new1 === "" || this.new2 === "";
    },
    ...mapState(["isLogin", "userInfo"]),
  },
  mounted() {
    console.log(this.userInfo);
  },
  methods: {
    async submit() {
      console.log(1);
      if (this.new1 !== this.new2) {
        uni.showToast({
          title: "两次输入的密码不一致",
          icon: "none",
        });
      } else {
        // uni.showToast({
        //   title: "设置成功",
        //   icon: "none",
        // });
        let res = await editPwd({
          oldpassword: this.old ? this.old : " ",
          newpassword: this.new1,
          renewpassword: this.new2,
        });
        console.log(res);

        uni.showToast({
          title: this.old ? "设置成功" : "修改成功",
          icon: "none",
        });
        this.$store.commit("edituser", { key: "password", value: true });
        setTimeout(() => {
          uni.navigateBack({});
        }, 500);
      }
    },
  },
};
</script>

<style scoped>
.input {
  padding: 20rpx;
  font-size: 25rpx;
  margin-bottom: 20rpx;
}
</style>
